<style lang="less">
@import '../../../styles/common.less';
</style>
<template>
  <Card style="height:800px">
    <Card>
      <header>
        <span> 证件号码:</span>
        <Input v-model="paymentCondition.custIdNumber" style="width:150px" />
        <span style="width: 200px;margin-left: 20px;">客户姓名 :</span>
        <Input v-model="paymentCondition.custName" style="width:150px" />
        <span style="width: 200px;margin-left: 20px;">贷款编号 :</span>
        <Input v-model="paymentCondition.loanId" style="width:150px" />
        <Button type="primary" @click="initData" style="margin-left: 20px;">提交</Button>
        <Button type="primary" @click="reset" style="margin-left: 20px;">重置</Button>
      </header>
    </Card>
    <Card>
      <Card style="height: 88px;">
        <div style="width:40%;float: left;margin-top: 8px;text-align: end;">
          <a href="javacript:void(0);" @click="refuseList()">已拒绝{{statistics.auditRefuseTotal}}份</a>
        </div>
        <div style="width:40%;float: left;margin-top: 8px;text-align: center;">
          <a href="javacript:void(0);" @click="adoptList()">已通过{{statistics.auditSuccessTotal}}份</a>
        </div>
        <!-- <div style="width:20%;float: left;margin-top: 8px;text-align: end;"><Button type="primary"  @click="back"  style="float: right">返回</Button></div> -->
      </Card>
      <Row type="flex" justify="center" align="middle" class="list-query">
        <Table :columns="columns" :data="columnData" style="width: 100%;"></Table>
      </Row>
      <div class="early-settle-bottom-page-div">
        <Page :total="paymentCondition.total" :current="paymentCondition.pageNum" :page-size="paymentCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
      </div>
    </Card>
    <Modal v-model="modal1" title="提前结清申请" @on-ok="ok" @on-cancel="cancel">
      <div class="early-settle-popup-style">
        <div class="early-settle-font-style">实还金额：</div>
        <Input v-model="applyInfo.paymentAmountAct" style="width: 150px" />
      </div>

      <div class="early-settle-popup-style">
        <div class="early-settle-font-style">还款方式:</div>
        <div>
          <Select v-model="applyInfo.paymentWay" class="v-select-wrapper" style="width:180px">
            <Option v-for="item in paytmentWayList" :value="item.value" :key="item.value">{{ item.label}}</Option>
          </Select>
        </div>
      </div>

      <div class="early-settle-popup-style">
        <div class="early-settle-font-style">备注：</div>
        <Input v-model="applyInfo.remarks" style="width: 150px" />
      </div>

      <div class="early-settle-popup-style">
        <div class="early-settle-font-style">转账人姓名：</div>
        <Input v-model="applyInfo.transferUserName" style="width: 150px" />
      </div>

    </Modal>

    <Modal v-model="modal2" title="提前结清试算" @on-ok="ok2" @on-cancel="cancel2" :scrollable="true">
      <div style="text-align: center;height: 500px;  overflow: auto;">
        <div class="early-settle-popup-style">
          <div class="early-settle-font-style">合同id：</div>
          <Input v-model="calculatInfo.contractId" style="width: 150px" :readonly='true' />
        </div>
        <div class="early-settle-popup-style">
          <div class="early-settle-font-style"> 客户姓名:</div>
          <Input v-model="calculatInfo.custName" style="width: 150px" :readonly='true' />
        </div>
        <div class="early-settle-popup-style">
          <div class="early-settle-font-style"> 证件号码:</div>
          <Input v-model="calculatInfo.custIdNumber" style="width: 150px" :readonly='true' />
        </div>
        <div class="early-settle-popup-style">
          <div class="early-settle-font-style"> 合同开始时间:</div>
          <Input v-model="calculatInfo.contractBeginDate" style="width: 150px" :readonly='true' />
        </div>
        <div class="early-settle-popup-style">
          <div class="early-settle-font-style"> 贷款本金:</div>
          <Input v-model="calculatInfo.loanPrincipal" style="width: 150px" :readonly='true' />
        </div>
        <div class="early-settle-popup-style">
          <div class="early-settle-font-style"> 未还本金:</div>
          <Input v-model="calculatInfo.remianPrincipal" style="width: 150px" :readonly='true' />
        </div>
        <div class="early-settle-popup-style">
          <div class="early-settle-font-style"> 未还利息:</div>
          <Input v-model="calculatInfo.remianInterest" style="width: 150px" :readonly='true' />
        </div>
        <div class="early-settle-popup-style">
          <div class="early-settle-font-style"> 未还费用:</div>
          <Input v-model="calculatInfo.remianCost" style="width: 150px" :readonly='true' />
        </div>
        <div class="early-settle-popup-style">
          <div class="early-settle-font-style">正常还款总金额:</div>
          <Input v-model="calculatInfo.repaymentAmount" style="width: 150px" :readonly='true' />
        </div>
        <div class="early-settle-popup-style">
          <div class="early-settle-font-style">合同状态:</div>
          <Input v-model="calculatInfo.contractIdStatus" style="width: 150px" :readonly='true' />
        </div>
        <div class="early-settle-popup-style">
          <div class="early-settle-font-style">当前期数:</div>
          <Input v-model="calculatInfo.currTerm" style="width: 150px" :readonly='true' />
        </div>
        <div class="early-settle-popup-style">
          <div class="early-settle-font-style">当前费用:</div>
          <Input v-model="calculatInfo.currFee" style="width: 150px" :readonly='true' />
        </div>
        <div class="early-settle-popup-style">
          <div class="early-settle-font-style">当前逾期费用:</div>
          <Input v-model="calculatInfo.currOverdueFee" style="width: 150px" :readonly='true' />
        </div>
        <div class="early-settle-popup-style">
          <div class="early-settle-font-style">提前结清费用:</div>
          <Input v-model="calculatInfo.earlyPaymentFee" style="width: 150px" :readonly='true' />
        </div>
        <div class="early-settle-popup-style">
          <div class="early-settle-font-style">提前结清总金额:</div>
          <Input v-model="calculatInfo.earlyPaymentAmount" style="width: 150px" :readonly='true' />
        </div>
      </div>
    </Modal>
  </Card>
</template>

<script>
export default {
  name: 'mutative-router',
  data () {
    return {
      modal1: false,
      modal2: false,
      paymentCondition: {
        custName: '',
        custIdNumber: '',
        loanId: '',
        pageNum: 1,
        pageSize: 10,
        total: 0,
        audistStatus: '',
        payType: ''
      },
      calculatInfo: {
        contractId: '',
        custName: '',
        custIdNumber: '',
        contractBeginDate: '',
        loanPrincipal: '',
        remianPrincipal: '',
        remianInterest: '',
        remianCost: '',
        repaymentAmount: '',
        contractIdStatus: '',
        currTerm: '',
        currFee: '',
        currOverdueFee: '',
        earlyPaymentFee: '',
        earlyPaymentAmount: ''
      },
      applyInfo: {
        paymentAmountAct: '', // 实还金额
        paymentWay: '', // 还款方式
        remarks: '', // 备注
        transferUserName: '', // 转账人姓名
        loanId: '', // 进件单号
        paymentAmount: ''// 提前结清试算金额

      },
      statistics: {
        auditRefuseTotal: 0,
        auditSuccessTotal: 0
      },
      paytmentWayList: [
        {
          value: '1',
          label: '对公转账'
        },
        {
          value: '2',
          label: '支付宝转账'
        }
      ],
      columns: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center'
        },
        {
          title: '身份证',
          key: 'custCardNo',
          align: 'center'
        },
        {
          title: '进件单号',
          key: 'loanId',
          align: 'center'
        },
        {
          title: '还款期数',
          key: 'currTenor',
          align: 'center'
        },
        {
          title: '资金方',
          key: 'fundName',
          align: 'center'
        },
        {
          title: '总欠款金额',
          key: 'amount',
          align: 'center'
        },
        {
          title: '实还金额',
          key: 'amountAct',
          align: 'center'
        },
        {
          title: '还款方式',
          key: 'repaymentWays',
          align: 'center',
          render: (h, params) => {
            if (params.row.repaymentWays === '1') { // 对公转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '对公转账')
            }
            if (params.row.repaymentWays === '2') { // 支付宝转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '对公转账')
            }
          }
        },
        {
          title: '状态',
          key: 'contractStatus',
          align: 'center',
          // 0正常 1逾期 2结清 3提前结清 10核销
          render: (h, params) => {
            if (params.row.contractStatus === '0') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '正常')
            }
            if (params.row.contractStatus === '1') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '逾期')
            }
            if (params.row.contractStatus === '3') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提前结清')
            }
            if (params.row.contractStatus === '10') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '核销')
            }
          }

        },
        {
          title: '备注',
          key: 'remarks',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            if (params.row.auditStatus !== '0') {
              return h('span', {
                style: {
                  'color': '#20a0ff',
                  'cursor': 'pointer'
                },
                on: {
                  click: () => {
                    this.applyInfo.loanId = params.row.loanId
                    this.calculatEarlypayment()
                    this.modal2 = true
                  }
                }
              }, '提前结清')
            }
          }
        }
      ],
      columnData: []
    }
  },
  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    if (this.$route.params.paymentCondition) {
      this.paymentCondition = this.$route.params.paymentCondition
    }
    // console.info(this.paymentCondition)
    this.initData()
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },
  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.paymentCondition.pageNum = pageNum
      vm.initData()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.paymentCondition.pageSize = pageLength
      vm.initData()
    },
    initData () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/earlyPayment/service/earlyPaymentApplyList', this.paymentCondition).then(re => {
        var data = re.data
        vm.columnData = data.data.list
        vm.paymentCondition.total = data.data.total
        vm.statistics = data.data.statistics
      }).catch(er => {

      })
    },
    ok () {
      var vm = this
      if (vm.applyInfo.paymentAmountAct === '') {
        this.$Message.warning('实还金额不能为空')
        return
      }
      var reg = /^\d+(?=\.{0,1}\d+$|$)/
      if (!reg.test(vm.applyInfo.paymentAmountAct)) {
        this.$Message.warning('实还金额必须为正数')
        return
      }
      if (vm.applyInfo.transferUserName === '') {
        this.$Message.warning('转账人姓名不能为空')
        return
      }
      if (parseInt(vm.applyInfo.paymentAmount) !== parseInt(vm.applyInfo.paymentAmountAct)) {
        this.$Message.warning('实还金额必须为试算金额')
        return
      }
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/earlyPayment/service/earlyPaymentApply', vm.applyInfo).then(re => {
        var data = re.data
        var message = data.message
        this.$Message.warning(message)
        vm.initData()
      }).catch(er => {

      })
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    },
    ok2 () {
      var vm = this
      vm.modal1 = true
      vm.applyInfo.paymentAmount = vm.calculatInfo.earlyPaymentAmount
    },
    cancel2 () {
      this.$Message.info('Clicked cancel')
    },
    adoptList () { // 通过
      var vm = this
      vm.paymentCondition.audistStatus = '1'
      vm.paymentCondition.payType = '2'
      var paymentCondition = vm.paymentCondition
      this.$router.push({ name: 'payment-audit-result', params: { paymentCondition } })// 类似post传参
    },

    refuseList () {
      var vm = this
      vm.paymentCondition.audistStatus = '2'
      vm.paymentCondition.payType = '2'
      var paymentCondition = vm.paymentCondition
      this.$router.push({ name: 'payment-audit-result', params: { paymentCondition } })// 类似post传参
    },
    back () {
      this.$router.push({ name: 'replace-payment-apply', params: {} })// 类似post传参
    },
    calculatEarlypayment () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/earlyPayment/service/calculatEarlypayment', vm.applyInfo).then(re => {
        var data = re.data
        // console.info(data.data)
        vm.calculatInfo = data.data
      }).catch(er => {

      })
    },
    reset () {
      var vm = this
      vm.paymentCondition.custName = ''
      vm.paymentCondition.custIdNumber = ''
      vm.paymentCondition.loanId = ''
    }
  }
}
</script>
<style>
.early-settle-font-style {
  float: left;
  margin-left: -88px;
  text-align: center;
  width: 142px;
}
.early-settle-popup-style {
  margin: 18px;
  width: 300px;
  margin-left: 27%;
  margin-top: 31px;
}
.early-settle-bottom-page-div {
  margin-top: 120px;
  text-align: center;
}
</style>
